<!DOCTYPE html>
<html lang="en" class="no-js">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Creative Button Styles </title>
        <meta name="description" content="Creative Button Styles  - Modern and subtle styles &amp; effects for buttons" />
        <meta name="keywords" content="button styles, css3, modern, flat button, subtle, effects, hover, web design" />
        <meta name="author" content="Codrops" />
        <!--<link rel="shortcut icon" href="../favicon.ico">--> 
        <link rel="stylesheet" type="text/css" href="css/default.css" />
        <link rel="stylesheet" type="text/css" href="css/component.css" />
    </head>
    <body>
        <div class="container">
            <!-- Top Navigation -->
<!--            <div class="codrops-top clearfix">
                <a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Tutorials/WebAudioStylophone/"><span>Previous Demo</span></a>
                <span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=15430"><span>Back to the Codrops Article</span></a></span>
            </div>-->
            <header>
                <h1>Creative Button Styles <span>Modern and subtle styles &amp; effects for buttons (hover and click)</span></h1>	
            </header>
            <section class="color-1">
                <p class="text note-touch">Note that on mobile devices the effects might not all work as intended.</p>
                <p>
                    <button class="btn btn-1 btn-1a">Button</button>
                    <button class="btn btn-1 btn-1b">Button</button>
                    <button class="btn btn-1 btn-1c">Button</button>
                </p>
                <p>
                    <button class="btn btn-1 btn-1d">Button</button>
                    <button class="btn btn-1 btn-1e">Button</button>
                    <button class="btn btn-1 btn-1f">Button</button>
                </p>
            </section>
            <section class="color-2">
                <p>
                    <button class="btn btn-2 btn-2a">Button</button>
                    <button class="btn btn-2 btn-2b">Button</button>
                </p>
                <p>
                    <button class="btn btn-2 btn-2c">Button</button>
                    <button class="btn btn-2 btn-2d">Button</button>
                </p>
                <p>
                    <button class="btn btn-2 btn-2e">Button</button>
                    <button class="btn btn-2 btn-2f">Button</button>
                </p>
                <p>
                    <button class="btn btn-2 btn-2g">Button</button>
                    <button class="btn btn-2 btn-2h">Button</button>
                </p>
                <p>
                    <button class="btn btn-2 btn-2i">Yes</button>
                    <button class="btn btn-2 btn-2j">No</button>
                </p>
            </section>
            <section class="color-3">
                <p>
                    <button class="btn btn-3 btn-3a icon-cart">Add to cart</button>
                    <button class="btn btn-3 btn-3b icon-star-2">Bookmark</button>
                </p>
                <p>
                    <button class="btn btn-3 btn-3c icon-heart-2">Favorite</button>
                </p>
                <p>
                    <button class="btn btn-3 btn-3d icon-cog">Settings</button>
                    <button class="btn btn-3 btn-3e icon-arrow-right">Send data</button>
                </p>
            </section>
            <section class="color-4">
                <p>
                    <button class="btn btn-4 btn-4a icon-arrow-right">Continue</button>
                    <button class="btn btn-4 btn-4b icon-arrow-left">Return</button>
                </p>
                <p>
                    <button class="btn btn-4 btn-4c icon-arrow-right">Continue</button>
                    <button class="btn btn-4 btn-4d icon-arrow-left">Return</button>
                </p>
            </section>
            <section class="color-5">
                <p>
                    <button class="btn btn-5 btn-5a icon-cart"><span>Add to cart</span></button>
                    <button class="btn btn-5 btn-5a icon-remove"><span>Delete</span></button>
                    <button class="btn btn-5 btn-5a icon-cog"><span>Settings</span></button>
                </p>
                <p>
                    <button class="btn btn-5 btn-5b icon-cart"><span>Add to cart</span></button>
                    <button class="btn btn-5 btn-5b icon-remove"><span>Delete</span></button>
                    <button class="btn btn-5 btn-5b icon-cog"><span>Settings</span></button>
                </p>
            </section>
            <section class="color-6">
                <p>
                    <button class="btn btn-6 btn-6a">Button</button>
                    <button class="btn btn-6 btn-6b">Button</button>
                    <button class="btn btn-6 btn-6c">Button</button>
                </p>
                <p>
                    <button class="btn btn-6 btn-6d">Button</button>
                    <button class="btn btn-6 btn-6e">Button</button>
                    <button class="btn btn-6 btn-6f">Button</button>
                </p>
                <p>
                    <button class="btn btn-6 btn-6g">Button</button>
                    <button class="btn btn-6 btn-6h">Button</button>
                    <button class="btn btn-6 btn-6i">Button</button>
                </p>
                <p>
                    <button class="btn btn-6 btn-6j">Button</button>
                    <button class="btn btn-6 btn-6k">Button</button>
                    <button class="btn btn-6 btn-6l">Button</button>
                </p>
            </section>
            <section class="color-7" id="btn-click">
                <p class="text">Click on the buttons to see the effect</p>
                <p>
                    <button class="btn btn-7 btn-7a icon-truck">Order item</button>
                    <button class="btn btn-7 btn-7b icon-envelope">Send message</button>
                </p>
                <p>
                    <button class="btn btn-7 btn-7c btn-icon-only icon-arrow-right">Submit</button>
                    <button class="btn btn-7 btn-7d btn-icon-only icon-remove">Empty</button>
                </p>
                <p>
                    <button class="btn btn-7 btn-7e btn-icon-only icon-heart">Like</button>
                    <button class="btn btn-7 btn-7f btn-icon-only icon-star">Fav</button>
                    <button class="btn btn-7 btn-7g btn-icon-only icon-plus">Add</button>
                </p>
                <p>
                    <button class="btn btn-7 btn-7h icon-envelope">Submit form</button>
                    <button class="btn btn-7 btn-7h icon-envelope">Submit form</button>
                </p>
                <div id="trash-effect" class="trash-effect">
                    <button class="btn btn-7 btn-7i btn-icon-only icon-remove-2">Remove</button>
                    <div class="icon-file"></div>
                    <div class="icon-file"></div>
                    <div class="icon-file"></div>
                </div>
            </section>
            <section class="color-8">
                <p class="perspective">
                    <button class="btn btn-8 btn-8a">3D Button</button>
                </p>
                <p class="perspective">
                    <button class="btn btn-8 btn-8b">3D Button</button>
                </p>
                <br />
                <p class="perspective">
                    <button class="btn btn-8 btn-8c">3D Button</button>
                </p>
                <p class="perspective">
                    <button class="btn btn-8 btn-8d">3D Button</button>
                </p>
                <p class="text">Click the following buttons to see the effect:</p>
                <p class="perspective">
                    <button class="btn btn-8 btn-8e">3D Button</button>
                </p>
                <p class="perspective">
                    <button class="btn btn-8 btn-8f">3D Button</button>
                </p>
                <br />
                <p class="perspective">
                    <button class="btn btn-8 btn-8g">3D Button</button>
                </p>
                <p class="perspective">
                    <button class="btn btn-8 btn-8g">3D Button</button>
                </p>
            </section>
        </div><!-- /container -->
        <!-- For the side ad -->
    </body>
</html>